import React from 'react';
import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Link, Route, Routes} from 'react-router-dom';
import AddTutorial from './components/AddTutorial';
import TutorialList from './components/TutorialList';
import Tutorial from './components/Tutorial';

function App() {
  return (
    <div>
      <nav className="navbar navbar-expand navbar-dark bg-dark">
        <a href="/tutorials" className="navbar-brand">
            西二旗的哥
        </a>
        <div className="navbar-nav mr-auto">
          <li className="nav-item">
              <Link to={"/tutorials"} className="nav-link">
                Tutorials
              </Link>
          </li>
          <li className="nav-item">
            <Link to={"/add"} className="nav-link">
              Add
            </Link>
          </li>
        </div>
      </nav>
      <div className="container mt-3">
          <Routes>
            <Route path="/" element={<TutorialList/>}/>
            <Route path="/tutorials" element={<TutorialList/>} />
            <Route path="/add" element={<AddTutorial/>}/>
            <Route path="/tutorials/:id" element={<Tutorial/>}/>
          </Routes>
      </div>
    </div>
  );
}

export default App;
